package myJs.cps

import cats.effect._
import japgolly.scalajs.react.ScalaFnComponent
import japgolly.scalajs.react.vdom.all._
import myJs.myPkg.reactBootstrap.{OverlayTrigger, Popover}
import myJs.myPkg.reactHookForm._
import org.scalajs.dom.html

import scala.collection.immutable.SeqMap
import scala.scalajs.js

object RSelectInlineNoFormGroupCp {

  case class Props(
    value: String = "",
    onChange: String => SyncIO[Unit],
    label: String,
    name: String = "",
    optionMap: SeqMap[String, String],
    questionInfo: String = "",
    show: Boolean = true,
    registerOptions: RegisterOptions = RegisterOptions(),
    inputWidth: Int = 4,
    labelWidth: Int = 2
  ) {
    @inline def render: VdomElement = {
      Component.withKey(this.label)(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val displayStr = if (props.show) "block" else "none"

    div(
      display := displayStr,
      className := s"",
      label(
        className := s"control-label col-sm-${props.labelWidth}",
        s"${props.label}",
        if(props.questionInfo.nonEmpty){
          val popover = Popover(id = "popover-basic")(
            Popover.Header("说明"),
            Popover.Body(
              props.questionInfo
            )
          ).rawElement
          OverlayTrigger(
            placement = "auto",
            trigger = js.Array("hover", "focus"),
            overlay = popover
          )(
            div(
              a(`type` := "button", i(className := "fa fa-question-circle-o"))
            )
          )
        }else EmptyVdom,
        ":"
      ),
      div(
        className := s"col-sm-${props.inputWidth}",

        PureRSelectCp.Props(
          name = props.name,
          value = props.value,
          onChange = props.onChange,
          optionMap = props.optionMap,
          registerOptions = props.registerOptions
        ).render,
      )
    )

  }

}
